<template>
  <div id="supervisionInformationDetail" v-loading="mainLoading" class="app-container">
    <div class="mainBox"> 
      <div class="leftBox">
        <div class="leftBox_title">
          外业核查轨迹及位置信息
        </div>
        <div class="leftBox_title_sub">
          <div class="leftBox_title_sub_piankuai leftBox_title_sub_text"><span>片块名：</span>{{pageData.landName}}</div>
          <div class="leftBox_title_sub_shijian leftBox_title_sub_text"><span>核查时间：</span>{{pageData.time}}</div>
        </div>
        <div class="leftBox_line"></div>
        <div class="fujianBox">
          
          <div class="fujianList" v-if="list.length!=0">
            <div class="fujianList_item" v-for="(item,index) in list" :key="index">
              <div class="fujianList_item_left">{{item.name}}</div>
              <div class="fujianList_item_right" @click="seeImg(item, index)">查看</div>
            </div>
          </div>
          <div class="fujianList fujianNoData" v-else>
            暂无数据
          </div>
        </div>
      </div>
      <div class="rightBox">
        <tdMap style="height: 600px" class="mapBox_right" ref="tdMap" :pkList="mainDataData" :isShowControls="false" />
      </div>
    </div>
    <!-- <div class="boxTitle">
      <div class="boxTitle_title">{{pageData.landName}}</div>
      <div class="boxTitle_time">{{typeText}}时间：{{pageData.time}}</div>
    </div>
    <div class="boxItem">
      <div class="boxItem_title">
        <span class="tit">外业核查轨迹及位置信息</span>
      </div>
      <div class="boxItem_content">
        <tdMap style="height: 600px" class="mapBox_right" ref="tdMap" :pkList="mainDataData" :isShowControls="false" />
      </div>
    </div>
    <div class="boxItem">
      <div class="boxItem_title">
        <span class="tit">举证资料</span>
      </div>
      <div class="boxItem_content" style="padding-top:30px;">
        <el-table :header-cell-style="{background:'#f9f9f9',color:'#606266'}" v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row>
          <el-table-column type="index" align="center" label="序号" width="120"></el-table-column>
          <el-table-column label="类型">
            <template slot-scope="scope">{{ scope.row.name }}</template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button type="text" @click="seeImg(scope.row)" size="small">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div> -->
    <el-dialog :title="title" :visible.sync="imgShow" :before-close="handleClose" class="imgDaolig">
      <div class="imgBox" style="width:500px;height:500px;margin:0 auto;" v-if="showImgType==1">
        <img style="width:100%;height:100%;" :src="$https+imgSrc" alt />
      </div>
      <div class="imgBox" style="width:700px;height:400px;margin:0 auto;" v-if="showImgType==2">
        <video id="showVedio" autoplay controls style="width:100%;height:100%;" :src="$https+imgSrc"></video>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleClose">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { earlyEnterpriseCheck, earlyEnterpriseCheckQianqi, supervisingCheck } from "@/api/earlyStageAchievementRecheck";
import { getLandStatusMapAuditInfo } from "@/api/siteSurveyEarlyStage";
import mapInit from "@/api/mapConfig";
import tdMap from "@/components/tdMap";
export default {
  components: {
    tdMap
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger"
      };
      return statusMap[status];
    }
  },
  data() {
    return {
      //综合监管信息附件类型切换
      fujianType:1,
      title: "查看图片",
      imgSrc: "",
      imgShow: false,
      mainLoading: false,
      activeName: "1",
      list: [],
      listLoading: false,
      listQuery: {
        page: 1,
        size: 10,
        projectId: 27,
        landId: "",
        applicantName: "",
        startTime: "",
        endTime: ""
      },
      total:0, //总数
      landId:'', //片块ID
      mainData:{
        coorDonate:[],
      },
      typeText:'前期测绘审查',
      checked:true,
      checked1:true,
      checked2:true,
      checked3:true,
      checked4:true,
      checked5:true,
      nowType:1,

      pageData: {
        landName: "",
        time: "",
        coorDonate: ""
      },
      showImgType: "", //区别视频或者图片 1 图片 2 视频

      mainDataData: []
    };
  },
  created() {
    //初始化赋值
    this.pageData.landName = this.$route.query.landName;
    this.pageData.time = this.$route.query.time;
    if (this.$route.query.coorDonate) {
      this.pageData.coorDonate = this.$route.query.coorDonate;

      var arr = [];
      var subArr = this.$route.query.coorDonate.split(",");
      arr.push(subArr);
      this.mainData.coorDonate = arr;
    }
    this.landId = this.$route.query.id;
    this.getDetail(this.$route.query.photo, this.$route.query.vcr);
    // this.getDetail1(this.$route.query.vcr)
    this.getDitu();
  },
  methods: {
    //切换附件类型事件
    changeFujianType(type){
      this.fujianType=type
    },
    getDitu() {
      var data = {
        landId: this.landId
      };
      getLandStatusMapAuditInfo(data).then(res => {
        let obj = res.data;
        let array = [];
        array.push(obj);
        this.mainDataData = array;
      });
    },
    handleClose() {
      this.imgShow = false;
      var vedio = document.getElementById("showVedio");
      vedio.currentTime = 0;
      vedio.pause();
    },
    //查看图片
    seeImg(row) {
      this.imgShow = true;
      this.imgSrc = row.path;
      this.showImgType = row.type;
      if (row.type == 1) {
        this.title = "查看图片";
      } else {
        this.title = "查看视频";
        this.$nextTick(()=>{
          var vedio = document.getElementById("showVedio");
          vedio.play();
        })
      }
      console.log(row);
    },
    //获取详情-照片
    getDetail(photos, vcrs) {
      this.mainLoading = true;
      var data = {
        // landId:this.landId,
        page: 1,
        size: 10,
        photo: photos,
        vcr: vcrs
        // landId:2,
      };
      supervisingCheck(data)
        .then(res => {
          this.mainLoading = false;
          var imageGeShi = ["bmp", "pcx", "png", "jpg", "jpeg", "gif", "tiff"];
          var videoGeShi = ["mp4", "avi", "flv", "rmvb", "mkv", "gif", "mov", "rm", "3gp"];
          var mainList = [];
          var mainList1 = [];
          res.data.rows.forEach((item, index) => {
            imageGeShi.forEach(item1 => {
              if (item.fileKey.substring(item.fileKey.indexOf(".") + 1, item.fileKey.length) == item1) {
                var index=item.fileKey.indexOf(".")
                var photoType=item.fileKey.substring(index,item.fileKey.length) 
                mainList.push({ name: "外业核查照片", path: item.filePath, type: 1,flieType:photoType });
              }
            });
          });
          res.data.rows.forEach((item, index) => {
            videoGeShi.forEach(item1 => {
              if (item.fileKey.substring(item.fileKey.indexOf(".") + 1, item.fileKey.length) == item1) {
                var index=item.fileKey.indexOf(".")
                var vedioType=item.fileKey.substring(index,item.fileKey.length) 
                mainList1.push({ name: "核查现场视频", path: item.filePath, type: 2,flieType:vedioType });
              }
            });
          });
          //名称处理
          mainList.forEach((item, index) => {
            item.name = item.name + (index != 0 ? index : "") + item.flieType;
          });
          mainList1.forEach((item, index) => {
            item.name = item.name + (index != 0 ? index : "") + item.flieType;
          });

          this.list = mainList.concat(mainList1);
          console.log(this.list, "this.list");
          this.initMap();
        })
        .catch(error => {
          this.mainLoading = false;
        });
    },
    //获取详情-照片
    getDetail1(vcrs) {
      this.mainLoading = true;
      var data = {
        landId: this.landId,
        vcr: vcrs
        // landId:2,
      };
      supervisingCheck(data)
        .then(res => {
          this.mainLoading = false;
          console.log(res, "详情都嘛-视频");
        })
        .catch(error => {
          this.mainLoading = false;
        });
    }
  }
};
</script>
<style scoped>
#supervisionInformationDetail {
  padding: 30px;
  box-sizing: border-box;
  padding-left: 130px;
  padding-right: 100px;
}
#supervisionInformationDetail .boxItem {
  width: 100%;
  background-color: #fff;
}
#supervisionInformationDetail .boxItem_title {
  width: 100%;
  background: #f8f8f8;
  height: 50px;
  border: 1px solid #efefef;
  overflow: hidden;
  color: #333;
  font-size: 18px;
  font-weight: bold;
  text-indent: 20px;
  line-height: 50px;
}
#supervisionInformationDetail .boxItem_content {
  width: 100%;
  border: 1px solid #ebebeb;
  border-top: none;
  padding: 30px;
  padding-top: 0;
  box-sizing: border-box;
}
#supervisionInformationDetail .boxItem_content_row {
  display: flex;
  align-items: center;
}
#supervisionInformationDetail .boxItem_content_row_item {
  display: flex;
  align-items: center;
}
#supervisionInformationDetail .boxItem_content_row_item {
  margin-right: 30px;
}
#supervisionInformationDetail .boxItem_content_row_item p {
  font-size: 14px;
  line-height: 36px;
}
#supervisionInformationDetail .boxItem_content_row_item p:first-child {
  color: #444;
  font-weight: bold;
}
#supervisionInformationDetail .boxItem_content_row_item p:last-child {
  color: #666;
}
#supervisionInformationDetail .uploadDownLoadBox_item p {
  width: 140px;
}
#supervisionInformationDetail .button_box {
  margin-top: 30px;
}
#supervisionInformationDetail .button_box_item {
  margin-right: 10px;
}
#supervisionInformationDetail .errorBox .el-dialog {
  width: 800px;
}
#supervisionInformationDetail .piankuaixinxi .title {
  width: 100%;
  height: 50px;
  text-align: center;
  font-size: 16px;
  line-height: 50px;
  border: 1px solid #ebeef5;
  border-bottom: none;
  border-top: none;
}
#supervisionInformationDetail .piankuaixinxi .title1 {
  width: 100%;
  height: 50px;
  text-align: center;
  font-size: 16px;
  line-height: 50px;
  border: 1px solid #ebeef5;
  border-bottom: none;
}
#supervisionInformationDetail .boxTitle {
  margin-bottom: 30px;
}
#supervisionInformationDetail .boxTitle .boxTitle_title {
  font-size: 20px;
  font-weight: bold;
  color: #444;
  text-align: center;
}
#supervisionInformationDetail .boxTitle_time {
  font-size: 14px;
  color: #999;
  margin-top: 20px;
  margin-bottom: 30px;
}
#supervisionInformationDetail .checkOut_item {
  margin-bottom: 10px;
}
#supervisionInformationDetail /deep/ .el-checkbox__input.is-disabled + span.el-checkbox__label {
  border-color: #409eff;
}
#supervisionInformationDetail .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
  border-color: #409eff;
  background-color: #409eff;
}
#supervisionInformationDetail .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after {
  border-color: #fff;
}
#supervisionInformationDetail .el-checkbox__input.is-disabled + span.el-checkbox__label {
  color: #12203e;
}
#supervisionInformationDetail .imgDaolig .el-dialog {
  width: 800px;
}

.mainBox{
  width: 100%;
  display: flex;
}
.leftBox{
  width: 40%;
}
.leftBox_title{
  color: #4D4D4D;
  font-size:18px;
  font-weight:bold;
  line-height:25px;
}
.leftBox_title_sub{
  display: flex;
  align-items: center;
  margin-top: 20px;
  margin-bottom: 20px;
}
.leftBox_title_sub .leftBox_title_sub_piankuai{
  margin-right: 40px;
}
.leftBox_title_sub .leftBox_title_sub_text{
  color: #595959;
  font-size: 14px;
}
.leftBox_title_sub_text span{
  color: #737373;
}
.leftBox_line{
  width:80%;
  height:1px;
  background:rgba(235,238,245,1);
  opacity:1;
  margin-top: 30px;
  margin-bottom: 14px;
}
.fujianBox_tabs{
  display: flex;
  align-items: center;
}
.fujianBox_tabs_item{
  width:60px;
  height:28px;
  background:#F0F3F5;
  opacity:1;
  border-radius:2px;
  color: #696969;
  font-size: 14px;
  margin-right: 8px;
  text-align: center;
  line-height: 28px;
  cursor: pointer;
}
.fujianBox_tabs_item.on{
  background:#409EFF;
  color: #fff;
}
.fujianList{
  width: 70%;
  margin-top: 14px;
}
.fujianList_item{
  width: 100%;
  display: flex;
  justify-content: space-between;
  height: 56px;
  line-height: 56px;
}
.fujianList_item .fujianList_item_left{
  color: #606266;
  font-size: 14px;
}
.fujianList_item .fujianList_item_right{
  color: #409EFF;
  font-size: 14px;
  cursor: pointer;
}
.rightBox{
  width: 45%;
}
.fujianNoData{
  text-align: center;
  margin-top: 50px;
  letter-spacing: 8px;
  color: #696969;
}
</style>
